<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
				var $carousel = $("#myCarousel");
				
				var $left_btn = $("#myCarousel .carousel_btns .btn_left");
				var $right_btn = $("#myCarousel .carousel_btns .btn_right");
				var $carousel_images_lis = $("#myCarousel .carousel_images ul li");
				var $carousel_nav_lis = $("#myCarousel .carousel_nav ol li");
				
				//信号量
				var idx = 0;
				//图片总数	
				var picAmount = $carousel_images_lis.length;
				// var picAmount = 4;
				
				//setInterval()定时器,定时任务
				var timer = setInterval($right_btn_handler , 1000);//1s
				
				$carousel.mouseover(function(){
					//移至图片暂停轮询
					clearInterval(timer);
				}).mouseout(function(){
					//离开图片恢复切换
					timer = setInterval($right_btn_handler , 1000);
				});
				
				//右按钮的监听
				$right_btn.click($right_btn_handler);
				
				//事件处理函数
				function right_btn_handler(){
					idx++;
					if(idx > picAmount - 1){
						idx = 0;
					}
					showPicAndSetCircles();
				}
				
				$left_btn.click(function(){
					idx--;
					if(idx < 0){
						idx = picAmount - 1;
					}
					showPicAndSetCircles();
				});
				
				$carousel_nav_lis.mouseover(function(){
					idx = $(this).index();
					showPicAndSetCircles();
				});
				
				
				//显示图片
				function showPicAndSetCircles(){
					//siblings():获取兄弟节点元素
					$carousel_images_lis.eq(idx).addClass("cur").siblings().removeClass("cur");
					$carousel_nav_lis.eq(idx).addClass("cur").siblings().removeClass("cur");
				}
			});

		
		</script>
		<style type="text/css">
			/* 所有元素周围没有边距 */
			*{
				margin: 0;
				padding: 0;
			}
			.carousel{
				width: 270px;
				height: 481px;
				margin: 50px auto;
				/* 定位方式：居中 */
				position: relative;
				background-color: gray;
			}
			
			/* 无序列表 */
			.carousel .carousel_images ul{
				/* 不显示序列标志（黑点） */
				list-style: none;
			}
			/* .carousel .carousel_images ul li{
				display: none;
			} */
			.carousel .carousel_images ul li.cur{
				/* display: block ! important; */
				display: block !important;
			}
			.carousel .carousel_images ul li img{
				width: 270px;
				height: 481px;
			}
			.carousel .carousel_nav{
				position: absolute;
				bottom: 0;
				right: 0;
				width: 123px;
				height: 24px;
			}
			.carousel .carousel_nav ol{
				list-style: none;
			}
			.carousel .carousel_nav ol li{
				float: left;
				width: 16px;
				height: 16px;
				margin-left: 6px;
				border-radius: 50%;
				background-color: #eee;
				opacity: 0.6;
				
			}
			.carousel .carousel_nav ol li.cur{
				background-color: darkred;
			}
			
			
			/* 左右按钮 */
			.carousel .carousel_btns .btn{
				position: absolute;
				width: 40px;
				height: 40px;
				border-radius: 20%;
				background-color: #ffd70085;
			}
			.carousel .carousel_btns .btn_left{
				top: 50%;
				left: 0;
				margin-top: -20px;
				margin-left: -20px;
			}
			.carousel .carousel_btns .btn_right{
				top: 50%;
				right: 0;
				margin-top: -20px;
				margin-right: -20px;
			}
		</style>
	</head>
	<body>
		<div class="carousel" id="myCarousel">
			<div class="carousel_images">
				<ul>
					<li style="display: none;" class="cur">
						<a href="javascript:;"><img src="js/0.jpg"/></a>
					</li>
					<li style="display: none;">
						<a href="javascript:;"><img src="js/1.jpg"/></a>
					</li>
					<li style="display: none;">
						<a href="javascript:;"><img src="js/2.jpg"/></a>
					</li>
					<li style="display: none;">
						<a href="javascript:;"><img src="js/3.jpg"/></a>
					</li>
					<li style="display: none;">
						<a href="javascript:;"><img src="js/4.jpg"/></a>
					</li>
				</ul>
			</div>
			
			<div class="carousel_nav">
				<ol>
					<li class="cur"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ol>
			</div>
			
			<div class="carousel_btns">
				<a href="javascript:;" class="btn_left btn" ></a>
				<a href="javascript:;" class="btn_right btn"></a>
			</div>
		</div>
	</body>
</html>